<template>
  <div>

    <!-- 条件搜托条 -->
    <div class="topSearch">
      <div class="leftBox">
      <div class="searchbox">
      <em>缴费方案名称：</em>
      <el-select v-model="searchBox.programme" @change="changPJ" size="small" placeholder="请选择项目" style="width:150px">
        <el-option v-for="pj in searchBox.projectListG" :key="pj.projectId" :label="pj.projectName" :value="pj.projectId"></el-option>
      </el-select>
      </div>
      <!-- <div class="searchbox">
      <em>学生来源：</em>
      <el-select v-model="searchBox.studentSource" size="small" placeholder="请选择学校区域" style="width:100px">
        <el-option label="报名系统" value="Sign"></el-option>
        <el-option label="学生系统" value="Student"></el-option>
      </el-select>
      </div> -->
      <div class="searchbox">
      <em>年级：</em>
      <el-select v-model="searchBox.grade" size="small" @change="gradeChange" style="width:120px"  placeholder="请选择年级" >
        <el-option label="全部" value=""></el-option>
        <el-option v-for="grade in searchBox.gradeList" :key="grade.gradeId" :label="grade.gradeName" :value="grade.gradeId"> </el-option>
      </el-select>
      </div>
      <div class="searchbox">
      <em>班级：</em>
      <el-select v-model="searchBox.class" size="small" style="width:100px" :disabled="searchBox.studentSource=='Sign'" placeholder="请选择年级" >
        <el-option label="全部" value=""></el-option>
        <el-option v-for="cla in searchBox.classList" :key="cla.classId" :label="cla.className" :value="cla.classId"> </el-option>
      </el-select>
      </div>
      <div class="searchbox">
      <em>学生姓名/身份证号：</em>
      <el-input v-model="searchBox.studentName" size="small" style="width:200px" placeholder="请输入学生姓名或身份证号"></el-input>
      </div>
      <div class="searchbox">
      <el-button type="primary" @click="getList" size="mini">查询</el-button>
      </div>
      </div>
      <!-- <div class="rightBox">
         <el-button type="primary" size="mini" @click="dialogFormVisible1=true">批量补录</el-button>
          <el-button type="primary" size="mini">批量打印数据</el-button>
      </div> -->
      <div class="clear"></div>
    </div>

    <!-- 列表内容 -->
    <div class="contentBox">
      <el-table :data="refundList" :header-cell-style="headClass" border stripe style="width: 100%" height="90%">
      <el-table-column prop="projectName" label="缴费方案名称" width="200"></el-table-column>
      <el-table-column label="方案状态">
        <template slot-scope="scope">
              <span v-if="scope.row.projectState=='Draft'">草稿</span>
              <span v-if="scope.row.projectState=='UnPublished'">未发布</span>
              <span v-if="scope.row.projectState=='Published'">已发布</span>
              <span v-if="scope.row.projectState=='StopUse'">停用</span>
            </template>
      </el-table-column>
      <el-table-column prop="schoolName" label="所在校区" width="200"></el-table-column>
      <el-table-column prop="gradeName" label="就读年级"></el-table-column>
      <el-table-column label="班级" width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.className==null||scope.row.className==undefined||scope.row.className==''">未设置班级</span>
          <span v-else>{{scope.row.className}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="studentName" label="学生姓名" width="120">
        <!-- <template slot-scope="scope">
              <strong style="color:#ff6910; font-size:16px;">{{scope.row.studentName}}</strong>
            </template> -->
      </el-table-column>
      <el-table-column prop="identityCardNumber" label="身份证号" width="200"></el-table-column>
      <!-- <el-table-column prop="stuType" label="学生类型"></el-table-column> -->
      <el-table-column label="应缴金额">
        <template slot-scope="scope">
          <span v-if="scope.row.payableMoney==''||scope.row.payableMoney==null||scope.row.payableMoney==undefined">0.00</span>
          <span :class="{fuFont:parseFloat(scope.row.payableMoney?scope.row.payableMoney:0).toFixed(2)*1000<0}" v-else>{{scope.row.payableMoney|moneyStyle}}</span>
        </template>
      </el-table-column>
      <el-table-column label="实收金额">
        <template slot-scope="scope">
          <span v-if="scope.row.paidMoney==''||scope.row.paidMoney==null||scope.row.paidMoney==undefined">0.00</span>
          <span :class="{fuFont:parseFloat(scope.row.paidMoney?scope.row.paidMoney:0).toFixed(2)*1000<0}" v-else>{{scope.row.paidMoney|moneyStyle}}</span>
        </template>
      </el-table-column>
      <el-table-column label="减免总金额" width="100">
        <template slot-scope="scope">
          <span style="color:#e8851e;" v-if="scope.row.tuitionMoney==''||scope.row.tuitionMoney==null||scope.row.tuitionMoney==undefined">0.00</span>
          <span style="color:#e8851e;" :class="{fuFont:parseFloat(scope.row.tuitionMoney?scope.row.tuitionMoney:0).toFixed(2)*1000<0}" v-else>{{scope.row.tuitionMoney|moneyStyle}}</span>
        </template>
      </el-table-column>
      <el-table-column label="欠缴金额">
        <template slot-scope="scope">
          <!-- <span>{{scope.row.payableMoney-scope.row.paidMoney-scope.row.tuitionMoney}}</span> -->
          <span :class="{fuFont:parseFloat(qianjiao(scope.row)).toFixed(2)*1000<0}">{{qianjiao(scope.row)}}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" width="120" label="操作">
        <template slot-scope="scope">
           <!-- TODO:退费 -->
           <el-button @click="Refund(scope.row)" type="primary" :disabled="parseFloat(scope.row.paidMoney).toFixed(2)*1000==parseFloat(0).toFixed(2)*1000" size="mini">退费</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="paging">
      <!-- TODO:分页 -->
        <el-pagination background layout="total, prev, pager, next" @current-change="handleCurrentChange" :current-page.sync="pageIndex" :total="pageAll"></el-pagination>
      </div>
    </div>

    <!-- 弹层内容 -->

  </div>
</template>

<script>
export default {
  data() {
    return {
      ccc:'退费内容',
      pageIndex:1,
      pageAll:0,
      searchBox:{
        programme:'',
        schollRegion:'',
        schollRegionList:[],
        grade:'',
        gradeList:[],
        class:'',
        classList:[],
        studentName:'',
        cardID:'',
        studentSource:'',
        projectListG:[]
      },
      refundList:[]
    }
  },
  // 监视
  watch:{
    "searchBox.programme":function(v){
      if(v){
        this.getList();
      }
    },
    "searchBox.grade":function(v){
      if(v){
        this.getList();
      }
    },
    "searchBox.class":function(v){
      if(v){
        this.getList();
      }
    }
  },
  filters:{
    moneyStyle(val){
      var nm = 0;
      nm =(parseFloat(val).toFixed(2)*1000)/1000;
      return nm;
    }
  },
  mounted() {
    this.getSearchCondition();
  },
  methods: {
    // 头部样式
    headClass:function(){
      return 'text-align: center;'
    },
    // 年级修改
    gradeChange:function(){
      this.searchBox.class='';
      this.getSearchCondition();
    },
    // 欠缴
    qianjiao:function(obg){
      var numq = 0;
      numq = (parseFloat(obg.payableMoney==null?0:obg.payableMoney)*1000-parseFloat(obg.paidMoney==null?0:obg.paidMoney)*1000-parseFloat(obg.tuitionMoney==null?0:obg.tuitionMoney)*1000)/1000;
      return parseFloat(numq).toFixed(2);
    },
    // 缴费方案改变
    changPJ:function(event){
      this.searchBox.grade = "";
      for(var a=0,lenn = this.searchBox.projectListG.length;a<lenn;a++){
        if(this.searchBox.projectListG[a].projectId==event){
          this.searchBox.studentSource = this.searchBox.projectListG[a].studentSource;
        }
      }
    },
    // 获取搜索条件
    getSearchCondition:function(){
      if(this.searchBox.grade!=''){
        this.searchBox.classList = [];
        this.$api.paymentOperation.GetSearchConditionTF(this.searchBox.grade).then(res=>{
        //console.log("获取班级查询条件",res);
        this.searchBox.classList = res.data.result.classList;
        })
      }else{
        this.$api.paymentOperation.GetSearchConditionTF().then(res=>{
        //console.log("获取退费查询条件",res);
          this.searchBox.gradeList = res.data.result.gradeList;
          this.searchBox.projectListG = res.data.result.projectList;
          this.searchBox.programme = res.data.result.projectList[0].projectId;
          this.searchBox.studentSource = res.data.result.projectList[0].studentSource;
          this.getList();
        })
      }

    },
    // 获取退费列表
    getList:function(){
      this.$api.paymentOperation.GetRefundList(this.searchBox.programme,this.searchBox.studentSource,this.searchBox.grade,this.searchBox.studentName,this.searchBox.class,this.pageIndex).then(res=>{
        //console.log("获取退费列表",res)
        this.refundList = res.data.result.list;
        this.pageIndex = res.data.result.page;
        this.pageAll = res.data.result.total;
      })
    },
    // FIXME:退费
    Refund:function(obg){
      this.$router.push({name:'AddRefund',params:{fMessage:obg}});
    },
    //FIXME: 分页切换
    handleCurrentChange:function(val){
      this.pageIndex = val;
      this.getList();
    }

  }
}
</script>
